<template>
	<s-layout title="订单概况">
		<view class="white-card">
			<view class="title">
				今日概况
				<text>更新时间:{{new Date().toLocaleString()}}</text>
			</view>
			<view class="card-content">
				<view>
					<text class="num">{{state.info.ljdd}}</text>
					<text>下单数量(笔)</text>
					<text class="compare">较昨日<text :class="state.info.ljddbzt>0?'add':'reduce'">{{state.info.ljddbzt}}</text></text>
				</view>
				<view>
					<text class="num">{{state.info.cjje}}</text>
					<text>成交金额(元)</text>
					<text class="compare">较昨日<text :class="state.info.cjjebzt>0?'add':'reduce'">{{state.info.cjjebzt}}</text></text>
				</view>
				<view>
					<text class="num">{{state.info.paynums}}</text>
					<text>下单人数(人)</text>
					<text class="compare">较昨日<text :class="state.info.paynumsbzt>0?'add':'reduce'">{{state.info.paynumsbzt}}</text></text>
				</view>
			</view>
		</view>
		<view class="white-card">
			<view class="title">
				全部订单
			</view>
			<view class="card-content">
				<view>
					<text class="num">{{state.info.dfknums}}</text>
					<text>待付款</text>
				</view>
				<view>
					<text class="num">{{state.info.dfhnums}}</text>
					<text>待发货</text>
				</view>
				<view></view>
				<view>
					<text class="num">{{state.info.dshnums}}</text>
					<text>待收货</text>
				</view>
				<view>
					<text class="num">{{state.info.shnums}}</text>
					<text>售后中</text>
				</view>
			</view>
		</view>
		<view class="white-card">
			<view class="tab-box">
				<view :class="state.rankTab==1?'active-tab':''" @click="changeTab(1)">
					订单数量
				</view>
				<view :class="state.rankTab==2?'active-tab':''" @click="changeTab(2)">
					订单金额
				</view>
			</view>
      <line-chart :data="state.chartInfo.left" :xAxis="state.chartDate" v-if="state.rankTab==1"/>
      <line-chart :data="state.chartInfo.right" :xAxis="state.chartDate" v-else/>
		</view>
	</s-layout>
</template>

<script setup>
	import LineChart from '../../component/linechart.vue';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';

	const state = reactive({
    info:{},
    rankTab: 1,
    chartInfo: {
      left:[],
      right:[]
    },
    chartDate:[]
	})

  async function getInfo() {
    const res = await sheep.$mapi.order.orderProfile();
    if (!res.code) return;
    state.info = res.data.list;
    res.data.xhyqs.forEach(item => {
      state.chartDate.push(item.date);
      state.chartInfo.left.push(item.payordernum);
      state.chartInfo.right.push(item.payamountnum);
    });
    const res2 = await sheep.$mapi.order.allOrderData();
    if (!res2.code) return;
    state.info = {
      ...state.info,
      ...res2.data.dbsx
    }
  }

	function changeTab(value) {
		state.rankTab = value;
	}

	onLoad((options) => {
    getInfo();
	});
</script>

<style lang="scss" scoped>
	.white-card {
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 28rpx;
		padding: 28rpx;

		.title {
			position: relative;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			padding-left: 20rpx;

			&::before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				content: "";
				width: 8rpx;
				height: 32rpx;
				background: #3A43FF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}

			>text {
				font-size: 24rpx;
				color: #666666;
				margin-left: 10rpx;
			}
		}

		.card-content {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10rpx;

			>view {
				margin: 20rpx 0;
				width: 33.33%;
				display: flex;
				flex-direction: column;
				font-size: 25rpx;
				color: #6f6f6f;

				.num {
					font-weight: 500;
					font-size: 40rpx;
					color: #333333;
					margin-bottom: 18rpx;
				}

				.compare {
					margin-top: 10rpx;

					.add {
						color: #FF5050;
					}

					.reduce {
						color: #5AAE58;
					}
				}
			}
		}

		.tab-box {
			width: 388rpx;
			height: 66rpx;
			background: #F7F7F7;
			border-radius: 98rpx 98rpx 98rpx 98rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-around;

			>view {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 100%;
				font-size: 26rpx;
				color: #333333;
			}

			.active-tab {
				background: #3A43FF;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				color: #fff;
			}
		}
	}
</style>
